*{
    margin: 0 0;
    padding: 0 0;
}


.loop-wrap {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    overflow: hidden;
}

.loop-images-container{
    position: absolute;
    left: 0; 
    top: 0;
    width: 2500px; /* 横向排列 5张图片 宽度应为主容器5倍 */
    height: 100%;
    font-size: 0;
    /* 初始位置位移 */
    /* transform: translate(0,0);  */
    animation: leftLoop 10s linear infinite;
}

.loop-image{
    width: 500px;
    height: 300px;
}

@keyframes loop {
    /* 0% {transform: translateX(0);}
    20% {transform: translateX(-25%);} 
    25% {transform: translateX(-25%);}
    45% {transform: translateX(-50%);} 
    50% {transform: translateX(-50%);} 
    70% {transform: translateX(-75%);} 
    75% {transform: translateX(-75%);}
    100% {transform: translateX(-100%);}   */
    0% {transform: translateX(0);}
    10% {transform: translateX(0);} 

    /* 切换500ms 位移-20% */
    15% {transform: translateX(-20%);} 
    35% {transform: translateX(-20%);}

    40% {transform: translateX(-40%);}
    60% {transform: translateX(-40%);}

    65% {transform: translateX(-60%);}
    85% {transform: translateX(-60%);}

    90% {transform: translateX(-80%);}
    /* 复位到第一张图片 */
    100% {transform: translateX(-80%);}
}

@keyframes leftLoop {
    0% { left: 0 }
    10% { left: 0 }

    /* 切换500ms 位移-20% */
    15% { left: -500px }
    35% { left: -500px }

    40% { left: -1000px }
    60% { left: -1000px }

    65% { left: -1500px }
    85% { left: -1500px }

    90% { left: -2000px}
    /* 复位到第一张图片 */
    100% { left: -2000px }
}